<div class="datatable">
  <table class="table table-hover">
    <div class="col-sm-12">
      <i class="fa fa-search searchIcon" aria-hidden="true"></i>
      <input
        type="text"
        class="searchInput"
        ng-model="$ctrl.state.textFilter"
        ng-change="$ctrl.onTextFilterChange()"
        placeholder="Search..."
        ng-model-options="{ debounce: 300 }"
      />
    </div>
    <thead>
      <tr>
        <th>
          <a ng-click="$ctrl.changeOrderBy('Name')">
            Name
            <span ng-show="$ctrl.state.orderBy == 'Name' && !$ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="$ctrl.state.orderBy == 'Name' && $ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-up"></span>
          </a>
        </th>
        <th>
          <a ng-click="$ctrl.changeOrderBy('Type')">
            Type
            <span ng-show="$ctrl.state.orderBy == 'Type' && !$ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-down"></span>
            <span ng-show="$ctrl.state.orderBy == 'Type' && $ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-up"></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        ng-click="!item.Inherited && $ctrl.entryClick(item)"
        ng-class="{ interactive: !item.Inherited }"
        dir-paginate="item in $ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit"
      >
        <td>
          {{ item.Name }}
          <!-- <span class="image-tag label label-">inherited</span> -->
          <span ng-if="item.Inherited" class="text-muted small" style="margin-left: 2px"><code style="font-size: 85% !important">inherited</code></span>
        </td>
        <td>
          <i class="fa" ng-class="item.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px"></i>
          {{ item.Type }}
        </td>
      </tr>
      <tr ng-if="!$ctrl.dataset">
        <td colspan="2" class="text-center text-muted">Loading...</td>
      </tr>
      <tr
        ng-if="
          $ctrl.dataset.length === 0 ||
          ($ctrl.dataset | filter: $ctrl.state.textFilter | orderBy: $ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit).length === 0
        "
      >
        <td colspan="2" class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
      </tr>
    </tbody>
  </table>
  <div class="footer" ng-if="$ctrl.dataset">
    <div class="paginationControls">
      <form class="form-inline">
        <span class="limitSelector">
          <span style="margin-right: 5px"> Items per page </span>
          <select ng-model="$ctrl.state.paginatedItemLimit">
            <option value="0">All</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </span>
        <dir-pagination-controls max-size="5"></dir-pagination-controls>
      </form>
    </div>
  </div>
</div>
